<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="queryForm"
        :model="formQuery"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <el-form-item label="发起时间 :">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="changePicker"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="账户名称 :">
          <!-- <el-input
            v-model="formQuery.merAccNo"
            placeholder="请输入"
          ></el-input> -->
          <el-select v-model="formQuery.merAccNo" @change="changetype">
            <el-option
              v-for="item in listMerAccInfo"
              :key="item.merAccNo"
              :label="item.merAccName"
              :value="item.merAccNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易金额 :" v-show="stateUpDown">
          <el-input v-model="formQuery.txnAmt" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态 :" v-show="stateUpDown">
          <el-select v-model="formQuery.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="onSearch"
            icon="el-icon-search"
            >搜索</el-button
          >
          <el-button size="small" icon="el-icon-refresh" @click="onReset"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <div v-if="stateUpDown" class="up-down" @click="tapUpDown">
            <el-button icon="el-icon-arrow-up">收起</el-button>
            <!-- <span>合并<i class="el-icon-arrow-up"></i></span> -->
          </div>
          <div v-else class="up-down" @click="tapUpDown">
            <el-button icon="el-icon-arrow-down">展开更多</el-button>
            <!-- <span>展开<i class="el-icon-arrow-down"></i></span> -->
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div class="div-span">
        <div class="div-text">
          <span> 提现累计: </span>
          <span> {{ transSum.cashAmt }}元 </span>
        </div>
        <!-- <div class="div-text">
          <span> 划入累计: </span>
          <span> {{ transSum.cashServiceFee }}元 </span>
        </div> -->
        <!-- <div class="div-text">
          <span> 划出累计: </span>
          <span> {{ transSum.changeInAmt }}元 </span>
        </div> -->
        <div class="div-text">
          <span> 提现手续费累计: </span>
          <span> {{ transSum.cashServiceFee }}元 </span>
        </div>
        <!-- <div class="div-text">
          <span> 划转手续费累计: </span
          ><span> {{ transSum.transferServiceFee }}元 </span>
        </div> -->
      </div>
      <el-table :data="transList" border>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="crtTime"
          label="发起时间"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="merAccNo"
          label="账户号"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="merAccName"
          label="账号名称"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="bankCardNo"
          label="收款账户"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="txnAmt"
          label="交易金额"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="serviceFee"
          label="手续费"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="beginTxnAmt"
          label="初期金额"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="afterTxnAmt"
          label="期末金额"
          width="200"
          align="left"
        ></el-table-column>
        <el-table-column label="业务类型" width="200" align="left">
          <template slot-scope="scope">
            {{ scope.row.txnType === "cash" ? "提现" : " " }}
            {{ scope.row.txnType === "transfer" ? "转账" : " " }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="200" align="left">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? "待处理" : " " }}
            {{ scope.row.status === 1 ? "处理中" : " " }}
            {{ scope.row.status === 2 ? "处理成功" : " " }}
            {{ scope.row.status === 3 ? "拒绝" : " " }}
            {{ scope.row.status === 4 ? "失败" : " " }}
            {{ scope.row.status === 5 ? "已撤销" : " " }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="left" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        class="pagination-margin"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formQuery.page"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="formQuery.limit"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { listStationMerAccInfo } from "@/api/finance/withdraw";
import {
  queryNoInsensTrans,
  queryNoInsensTransSum,
} from "@/api/finance/transaction";
export default {
  name: "Transaction",
  data() {
    return {
      listMerAccInfo: [],
      options: [
        {
          label: "待处理",
          value: "0",
        },
        {
          label: "处理中",
          value: "1",
        },
        {
          label: "处理成功",
          value: "2",
        },
        {
          label: "拒绝",
          value: "3",
        },
        {
          label: "失败",
          value: "4",
        },
        {
          label: "已撤销",
          value: "5",
        },
      ],
      // 选择的时间范围
      time: null,
      // 隐藏展开
      stateUpDown: true,
      // 总条数
      total: 0,
      // 请求需要的数据
      formQuery: {
        page: 1,
        limit: 10,
        startTime: "",
        endTime: "",
        merAccNo: "",
        txnAmt: "",
        status: "2",
      },
      //获取查询提现汇总
      transSum: {
        cashAmt: 0,
        cashServiceFee: 0,
        changeInAmt: 0,
        changeOutAmt: 0,
        transferServiceFee: 0,
      },
      //获取查询提现列表
      transList: [],
    };
  },
  async created() {
    const results = await listStationMerAccInfo();
    this.listMerAccInfo = results;
    this.formQuery.merAccNo = this.listMerAccInfo[0].merAccNo;
    this.getResultsList();
  },
  methods: {
    // 点击隐藏展开
    tapUpDown() {
      this.stateUpDown = !this.stateUpDown;
    },
    // 用户确认了时间范围
    changePicker(e) {
      this.formQuery.startTime = e[0];
      this.formQuery.endTime = e[1];
      // console.log("formQuery", this.formQuery);
    },
    // 点击重置
    onReset() {
      this.time = null;
      this.formQuery = {
        page: 1,
        limit: 10,
        startTime: "",
        endTime: "",
        merAccNo: this.listMerAccInfo[0].merAccNo,
        txnAmt: "",
        status: "",
      };
      // console.log("点击重置");
      this.getResultsList();
    },

    // 分页器
    handleSizeChange(val) {
      this.formQuery.limit = val;
      this.getResultsList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formQuery.page = val;
      this.getResultsList();
      console.log(`当前页: ${val}`);
    },

    // 点击查询
    async onSearch() {
      this.getResultsList();
    },

    // 点击操作查看
    handleClick(row) {
      console.log("点击操作查看", row);
    },

    // 发送请求获取数据
    async getResultsList() {
      if (this.listMerAccInfo.length) {
        const query = this.formQuery;

        const results = await Promise.all([
          // 获取查询提现列表
          queryNoInsensTrans(query),
          // 获取查询提现汇总
          queryNoInsensTransSum(query),
        ]);
        //获取查询提现列表
        this.transList = results[0].records;
        // 总条数
        this.total = results[0].total;
        // 获取查询提现汇总
        this.transSum = results[1];
        console.log("获取查询提现汇总", results[0].records);
      } else {
        this.transList = [];
        // 总条数
        this.total = 0;
        // 获取查询提现汇总
        this.transSum = {
          cashAmt: 0,
          cashServiceFee: 0,
          changeInAmt: 0,
          changeOutAmt: 0,
          transferServiceFee: 0,
        };
      }
    },
  },
};
</script>
<style>
.pagination-margin {
  margin: 30px 0px 10px 0px;
}
.up-down {
  color: #ff4949;
}
.box-card {
  margin-top: 20px;
}
.div-text {
  margin: 20px;
}
.div-span {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  color: #606266;
  font-size: 16px;
  font-weight: bold;
}
</style>
